import React, { Component, createRef } from 'react';

class From extends Component {
  constructor() {
    super();
    this.state = {
      val1: '',
      val2: '',
      val3: 'nan',
      val4: 'nv',
      val5: '',
      val6: [],
      val7: ''
    }
    // 创建一个ref
    this.btnRef = React.createRef()
    this.fileRef = React.createRef()
    this.formRef = React.createRef()
  }
  getVal1(e){
    this.setState({
      val1: e.target.value
    }, ()=> {
      console.log(this.state.val1);
    })
  }
  getVal2(e){
    this.setState({
      val2: e.target.value
    }, ()=> {
      console.log(this.state.val2);
    })
  }
  check1(e) {
    this.setState({
      val5: e.target.value
    }, ()=>{
      console.log(this.state.val5);
    })
  }
  check2(e) {
    let arr = this.state.val6;
    if(arr.includes(e.target.value)) {
      // 值为真表示已经包含在数组中,就删掉
      arr.splice(arr.indexOf(e.target.value), 1)
    }else {
      // 值为假就表示不在数组中，就加入
      arr.push(e.target.value)
    }
    this.setState({
      val6: arr
    }, ()=>{
      console.log(this.state.val6);
    })
  }
  componentDidMount() {
    // 设置输入框的值
    this.setState({
      val5: 'nv',
      val6: ['rap'],
      val7: 'beijing'
    })
  }
  getVal7(e) {
    console.log(e.target.value);
    this.setState({
      val7: e.target.value
    })
  }
  showBtn(){
    console.log(this.btnRef.current);
  }
  submit(e) {
    // 阻止默认事件，避免提交表单后刷新
    e.preventDefault();
    console.log(this.formRef);
    // 获取用户上传的文件
    console.log(this.fileRef.current.files);
  }
  render() {
    return (
      <div>
        <p>react处理表单元素-设置值和获取值</p>
        {/* <input :value="val1" @input="xxx" /> */}
        <input type="text" value={this.state.val1} onChange={(e)=>this.getVal1(e)}></input>
        <textarea value={this.state.val2} onChange={(e)=>this.getVal2(e)}></textarea>
        <hr />
        <span>性别：</span>
        <input type="radio" checked={this.state.val5 === this.state.val3} name="sex" value={this.state.val3} onChange={(e)=>this.check1(e)}></input>男
        <input type="radio" checked={this.state.val5 === this.state.val4} name="sex" value={this.state.val4} onChange={(e)=>this.check1(e)}></input>女
        <p>你的性别：{this.state.val5}</p>
        <hr />
        <input type="checkbox" checked={this.state.val6.includes("sing")} value="sing" onChange={(e)=>this.check2(e)} />唱
        <input type="checkbox" checked={this.state.val6.includes("dance")} value="dance" onChange={(e)=>this.check2(e)} />跳
        <input type="checkbox" checked={this.state.val6.includes("rap")} value="rap" onChange={(e)=>this.check2(e)} />rap
        <input type="checkbox" checked={this.state.val6.includes("basketball")} value="basketball" onChange={(e)=>this.check2(e)} />打篮球
        <p>你的爱好：{this.state.val6.map(item => {
          return <span key={item}>{item},</span>
        })}</p>
        <hr />
        <span>你的出差地</span>
        <select value={this.state.val7} onChange={(e)=>this.getVal7(e)}>
          <option value="chongqing">重庆</option>
          <option value="changsha">长沙</option>
          <option value="chengdu">成都</option>
          <option value="beijing">北京</option>
        </select>
        <p>你的出差地：{this.state.val7}</p>
        <hr />
        <button ref={this.btnRef} onClick={()=>this.showBtn()}>我是一个按钮</button>
        <hr />
        <form ref={this.formRef}>
          <input type="file" ref={this.fileRef} name="file"></input>
          <button onClick={(e)=>this.submit(e)}>提交文件</button>
        </form>
      </div>
    );
  }
}

export default From;
